<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript基础</title>
</head>
<body>
    <script>
        // #需要在dom载入后再调用，所以要写在onload中
        window.onload = function () {
            //监听按钮的点击事件
            document.querySelector("div#sigin input.sub").addEventListener("click", function () {
                let username = document.querySelector("div#sigin input[name='username']").value;
                console.log(username);//在控制台输出日志
                let password = document.querySelector("div#sigin input[name='password']").value;
                if (username === "rabbit" || password === "love"){
                    alert("验证失败");
                    //location.replace("https://www.rabbitpre.com");
                }else{
                    alert("验证失败");
                }
            })

            document.querySelector("div#signup input.sub").addEventListener("click", function () {
                let username = document.querySelector("div#signup input[name='username']").value;
                console.log(username);//在控制台输出日志
                let password = document.querySelector("div#signup input[name='password']").value;
                if (username === "rabbit" || password === "love"){
                    // location.replace("https://www.rabbitpre.com");
                    setTimeout(function(){
                        document.querySelector("div#signup").innerHTML= '<p>注册成功</p>';
                    }, 3000);

                }else{
                    alert("验证失败");
                }
            })
        }
    </script>
    <h1>祝大家牛年大吉！</h1>
    <div id="sigin" hidden>
        <form action="demo_form.php">
        用户名: <input type="text" name="username" maxlength="10"><br>
        密码: <input type="password" name="password" maxlength="10"><br>
        <input type="button" class="sub" value="确定">
        </form>
    </div>

    <div id="signup">
        <form action="demo_form.php">
        用户名: <input type="text" name="username" maxlength="10"><br>
        密码: <input type="password" name="password" maxlength="10"><br>
        <input type="button" class="sub" value="确定">
        </form>

    </div>
</body>
</html>